<template>
  <div class="">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('投资主体')" prop="fundId">
        <investment-select
          v-model="queryParams.fundId"
          :placeholder="$t('投资主体')"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('项目行业')" prop="dealIndustry">
        <el-select
          v-model="queryParams.dealIndustry"
          size="small"
          :placeholder="$t('项目行业')"
          clearable
          @change="changeDeal"
          @keyup.enter.native="queryHandle"
        >
          <el-option v-for="item in industryOptions" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
      <el-row>
        <el-col :span="24">
          <el-row :gutter="20" class="mt15">
            <el-col :span="12">
              <div class="area-header">
                <span class="area-header-title">{{ $t('阶段分布及转化率') }}</span>
                <div class="stage-select" style="float: right">
                  <el-select v-model="queryParams.stageType" class="w100" style="width: 75px" size="mini" :placeholder="$t('请选择')" @change="changeStage">
                    <el-option
                      v-for="dict in options"
                      :key="dict.dictValue"
                      :label="$t(dict.dictLabel)"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </div>
              </div>
              <Empty :data="stageChartData.datas">
                <funnelChart v-if="stageChartData.datas.length > 0" ref="funnelChart" :chart-data="stageChartData" height="400px" @xData="funnelChartClick" />
              </Empty>
            </el-col>
            <el-col :span="12">
              <div class="area-header">
                <span class="area-header-title">{{ $t('人员统计') }}</span>
              </div>
              <barLineChart v-if="personChartData.datas.length > 0" ref="barChart" zoom-start="0" zoom-end="20" :chart-data="personChartData" height="400px" />
              <div v-else class="noneData" style="height: 400px">
                <div>
                  <svg-icon icon-class="none" class-name="none-icon" />
                  <p>{{ $t('暂无数据') }}</p>
                </div>
              </div>
            </el-col>
            <el-col v-loading="industryLoading" :span="12">
              <div class="area-header">
                <span class="area-header-title">{{ $t('行业分布') }}</span>
                <div class="tags" style="float: right">
                  <el-button :type="queryParams.industryNodeType === 'number' ? 'primary' : 'default'" size="mini" class="tag-btn-left" @click="changeTag('industry','number')">{{ $t('数量(个)') }}</el-button>
                  <el-button style="margin-right: 15px;" :type="queryParams.industryNodeType === 'amount' ? 'primary' : 'default'" size="mini" class="tag-btn-right" @click="changeTag('industry','amount')">{{ $t('规模(万)') }}</el-button>
                  <el-select v-model="queryParams.industrySearchType" style="width: 75px" class="w100" size="mini" :placeholder="$t('请选择')" @change="onChange('industry')">
                    <el-option
                      v-for="dict in options"
                      :key="dict.dictValue"
                      :label="$t(dict.dictLabel)"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </div>
              </div>
              <pieChart v-if="industryChartData.datas.length > 0" :chart-data="industryChartData" height="400px" @xData="tooltipClick" />
              <div v-else class="noneData" style="height: 400px">
                <div>
                  <svg-icon icon-class="none" class-name="none-icon" />
                  <p>{{ $t('暂无数据') }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="area-header">
                <span class="area-header-title">{{ $t('执行中项目规模') }}</span>
                <div style="float: right">
                  <span class="el-icon-setting" style="font-size: 20px;cursor: pointer" @click="openExecuteStageSetting" />
                </div>
              </div>
              <Empty :data="executeStageChartData.datas">
                <barLineChart v-if="executeStageChartData.datas.length > 0" ref="executeStageChart" :chart-data="executeStageChartData" height="400px" />
              </Empty>
            </el-col>
            <el-col v-loading="dealTypeLoading" :span="12">
              <div class="area-header">
                <span class="area-header-title">{{ $t('投资类型') }}</span>
                <div class="tags" style="float: right">
                  <el-button :type="queryParams.dealTypeNodeType === 'number' ? 'primary' : 'default'" size="mini" class="tag-btn-left" @click="changeTag('dealInvestmentType','number')">{{ $t('数量(个)') }}</el-button>
                  <el-button style="margin-right: 15px;" :type="queryParams.dealTypeNodeType === 'amount' ? 'primary' : 'default'" size="mini" class="tag-btn-right" @click="changeTag('dealInvestmentType','amount')">{{ $t('规模(万)') }}</el-button>
                  <el-select v-model="queryParams.sourceSearchType" style="width: 75px" class="w100" size="mini" :placeholder="$t('请选择')" @change="onChange('dealInvestmentType')">
                    <el-option
                      v-for="dict in options"
                      :key="dict.dictValue"
                      :label="$t(dict.dictLabel)"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </div>
              </div>
              <pieChart v-if="investTypeChartData.datas.length > 0" height="400px" :chart-data="investTypeChartData" @xData="tooltipClick" />
              <div v-else class="noneData" style="height: 400px">
                <div>
                  <svg-icon icon-class="none" class-name="none-icon" />
                  <p>{{ $t('暂无数据') }}</p>
                </div>
              </div>
            </el-col>
            <el-col v-loading="areaLoading" :span="12">
              <div class="area-header">
                <span class="area-header-title">{{ $t('地域') }}</span>
                <div class="tags" style="float: right">
                  <el-button :type="queryParams.areaNodeType === 'number' ? 'primary' : 'default'" size="mini" class="tag-btn-left" @click="changeTag('area','number')">{{ $t('数量(个)') }}</el-button>
                  <el-button style="margin-right: 15px;" :type="queryParams.areaNodeType === 'amount' ? 'primary' : 'default'" size="mini" class="tag-btn-right" @click="changeTag('area','amount')">{{ $t('规模(万)') }}</el-button>
                  <el-select v-model="queryParams.areaSearchType" style="width: 75px" class="w100" size="mini" :placeholder="$t('请选择')" @change="onChange('area')">
                    <el-option
                      v-for="dict in options"
                      :key="dict.dictValue"
                      :label="$t(dict.dictLabel)"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </div>
              </div>
              <pieChart v-if="areaChartData.datas.length > 0" :chart-data="areaChartData" height="400px" @xData="tooltipClick" />
              <div v-else class="noneData" style="height: 400px">
                <div>
                  <svg-icon icon-class="none" class-name="none-icon" />
                  <p>{{ $t('暂无数据') }}</p>
                </div>
              </div>
            </el-col>
          </el-row>

          <!-- 添加或修改项目跟踪对话框 -->
          <el-dialog :title="$t('项目')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" :destroy-on-close="true" custom-class="dialogForm" append-to-body>
            <div v-loading="trackLoading" class="parentStyle" style="height: 100%;">
              <el-table ref="table" height="calc(100% - 75px)" :data="trackList" border>
                <el-table-column align="center" prop="dealName" :label="$t('项目名称')" show-overflow-tooltip min-width="180">
                  <template slot-scope="scope">
                    <router-link
                      target="_blank"
                      :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
                      :style="scope.row.lastMonth ? '' : 'color:red'"
                      class="link_a"
                    >{{ scope.row.dealName }}</router-link>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="personChargeName" :label="$t('负责人')" min-width="90" />
                <el-table-column :label="$t('最近一周')" min-width="250" prop="lastWeek" class-name="alinTop">
                  <template slot-scope="scope">
                    <div class="progressTimeLine">
                      <el-row v-for="(item, index) in scope.row.lastWeek" :key="index">
                        <div size="mini" class="progressItem" @click="viewTrack(item)">
                          <div v-if="item.msgCount > 1" class="msgCount">
                            <svg-icon icon-class="message" />
                            <span class="icon">{{ item.msgCount }}</span>
                          </div>
                          <p class="tit">
                            <span class="text">{{ formatText(item.details) }}</span>
                          </p>
                          <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                          <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                          <div class="bottom">
                            <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                            <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                          </div>
                          <div class="bottom">
                            <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                            <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                          </div>
                        </div>
                      </el-row>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('上一周')" min-width="250" prop="pastWeek" class-name="alinTop">
                  <template slot-scope="scope">
                    <div class="progressTimeLine">
                      <el-row v-for="(item, index) in scope.row.pastWeek" :key="index">
                        <div size="mini" class="progressItem" @click="viewTrack(item)">
                          <div v-if="item.msgCount > 1" class="msgCount">
                            <svg-icon icon-class="message" />
                            <span class="icon">{{ item.msgCount }}</span>
                          </div>
                          <p class="tit">
                            <span class="text">{{ formatText(item.details) }}</span>
                          </p>
                          <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                          <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                          <div class="bottom">
                            <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                            <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                          </div>
                          <div class="bottom">
                            <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                            <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                          </div>
                        </div>
                      </el-row>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('历史三次跟踪')" min-width="250" prop="historyNearlyThree">
                  <template slot-scope="scope">
                    <div class="progressTimeLine">
                      <el-row v-for="(item, index) in scope.row.historyNearlyThree" :key="index">
                        <div size="mini" class="progressItem" @click="viewTrack(item)">
                          <div v-if="item.msgCount > 1" class="msgCount">
                            <svg-icon icon-class="message" />
                            <span class="icon">{{ item.msgCount }}</span>
                          </div>
                          <p class="tit">
                            <span class="text">{{ formatText(item.details) }}</span>
                          </p>
                          <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                          <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                          <div class="bottom">
                            <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                            <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                          </div>
                          <div class="bottom">
                            <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                            <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                          </div>
                        </div>
                      </el-row>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="trackTotal>0"
                :total="trackTotal"
                :page.sync="trackQuery.pageNum"
                :limit.sync="trackQuery.pageSize"
                @pagination="getTrackList"
              />
            </div>
          </el-dialog>
        </el-col>
      </el-row>
    </el-form>

    <!-- 执行中项目设置对话框 -->
    <el-dialog :title="$t('设置')" :visible.sync="dealOpen" width="40%" :close-on-click-modal="false" :lock-scroll="false" :destroy-on-close="true" custom-class="dialogForm" append-to-body>
      <div v-loading="stageLoading" class="parentStyle stageForm" style="height: 100%;">
        <el-form ref="stageForm" :model="stageForm">
          <div class="area-header">
            <span class="area-header-title">{{ $t('首轮投资') }}</span>
          </div>
          <el-table ref="table" :data="stageForm.firstNodeList" border>
            <el-table-column align="center" prop="nodeName" :label="$t('流程节点')" show-overflow-tooltip min-width="90" />
            <el-table-column align="center" prop="busStatus" :label="$t('所属阶段')" min-width="110">
              <template slot-scope="scope">
                <el-form-item :prop="'firstNodeList.'+scope.$index + '.busStatus'">
                  <dict-select v-model="scope.row.busStatus" dictionary="deal_stage_setting" :placeholder="$t('所属阶段')" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
          <div class="area-header" style="margin-top: 20px">
            <span class="area-header-title">{{ $t('新增投资') }}</span>
          </div>
          <el-table ref="table" :data="stageForm.increaseNodeList" border>
            <el-table-column align="center" prop="nodeName" :label="$t('流程节点')" show-overflow-tooltip min-width="90" />
            <el-table-column align="center" prop="busStatus" :label="$t('所属阶段')" min-width="120">
              <template slot-scope="scope">
                <el-form-item :prop="'increaseNodeList.'+scope.$index + '.busStatus'">
                  <dict-select v-model="scope.row.busStatus" dictionary="deal_stage_setting" :placeholder="$t('所属阶段')" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right;">
          <el-button @click="dealOpen = false">{{ $t('取消') }}</el-button>
          <el-button type="primary" @click="submitForm">{{ $t('保存') }}</el-button>
        </div>
      </div>
    </el-dialog>

    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
    </div>
  </div>
</template>
<script>
import pieChart from '@/views/chart/pieChart.vue'
import funnelChart from '@/views/chart/funnelChart.vue'
import barLineChart from '@/views/chart/barLineChart.vue'
import { trackInfo } from '@/api/deal/track/dealTrack'
import {
  getChart,
  getIndustry,
  getBarChart,
  getStageChart,
  getExecuteStageChart, getFlowNodeList, saveFlowNodeList
} from '@/api/deal/before/dealBeforeBoard'
import { moneyFormat } from '@/utils/ruoyi'
export default {
  components: { pieChart, barLineChart, funnelChart },
  data() {
    return {
      options: [
        { dictValue: 'year', dictLabel: '本年' },
        { dictValue: 'all', dictLabel: '全部' }
      ],
      values: '',
      industryChartData: {
        datas: [],
        color: ['#434EB8', '#6169DD', '#2B8EF3', '#14C9C9', '#71D5F8', '#D571F8', '#8F00FF', '#3900E5']
      },
      areaChartData: {
        datas: [],
        color: ['#434EB8', '#6169DD', '#2B8EF3', '#14C9C9', '#71D5F8', '#D571F8', '#8F00FF', '#3900E5']
      },
      investTypeChartData: {
        datas: [],
        color: ['#434EB8', '#6169DD', '#2B8EF3', '#14C9C9', '#71D5F8', '#D571F8', '#8F00FF', '#3900E5']
      },
      personChartData: {
        datas: [],
        yAxisName1: this.$t('(个)'),
        color: ['#434EB8', '#6169DD', '#2B8EF3', '#14C9C9', '#71D5F8', '#D571F8', '#8F00FF', '#3900E5']
      },
      stageChartData: {
        datas: [],
        color: ['#434EB8', '#6169DD', '#2B8EF3', '#14C9C9', '#71D5F8', '#D571F8', '#8F00FF', '#3900E5']
      },
      total: 0,
      loading: false,
      trackInfoList: [],
      trackList: [],
      trackTotal: 0,
      trackQuery: {
        pageNum: 1,
        pageSize: 20
      },
      dealOpen: false,
      queryParams: {
        fundId: undefined,
        deptId: undefined,
        userId: undefined,
        dealStatus: undefined,
        trackTime: undefined,
        levelConcern: undefined,
        industryNodeType: 'number',
        areaNodeType: 'number',
        dealTypeNodeType: 'number',
        pageNum: 1,
        pageSize: 20,
        dealType: this.$route.query.dealType,
        infoDealType: this.$route.query.dealType,
        personDealType: this.$route.query.dealType,
        industrySearchType: 'year',
        areaSearchType: 'year',
        sourceSearchType: 'year',
        stageType: 'year',
        dealIndustry: undefined
      },
      formOpen: false,
      itemTypeOptions: [],
      trackModeOptions: [],
      infoLoading: true,
      // 看板数据
      dashboardInfo: null,
      industryShowChart: true,
      areaShowChart: true,
      dealTypeShowChart: true,
      dealTypeOptions: [],
      chartName: undefined,
      industryLoading: true,
      areaLoading: true,
      dealTypeLoading: true,
      stageChartName: undefined,
      trackLoading: false,
      // 行业字典
      industryOptions: [],
      // 执行中图表
      executeStageChartData: {
        datas: [],
        valueFormatter: true,
        yAxisName1: this.$t('(万)'),
        color: ['#434EB8', '#6169DD', '#2B8EF3', '#14C9C9', '#71D5F8', '#D571F8', '#8F00FF', '#3900E5']
      },
      // 流程节点列表
      stageForm: {
        nodeList: [],
        increaseNodeList: [],
        firstNodeList: []
      },
      stageLoading: false
    }
  },
  computed: {
  },
  created() {
    this.getDicts('item_type').then(response => {
      this.itemTypeOptions = response.data
    })
    this.getDicts('track_mode').then(response => {
      this.trackModeOptions = response.data
    })
    this.getDicts('deal_type').then(res => {
      this.dealTypeOptions = res.data
    })
    getIndustry().then(res => {
      this.industryOptions = res.data
    })
    this.getExecuteStageChart()
    this.getChart('industry', this.queryParams.industryNodeType)
    this.getChart('area', this.queryParams.areaNodeType)
    this.getChart('dealInvestmentType', this.queryParams.dealTypeNodeType)
    this.getList()
  },
  mounted() {
  },
  methods: {
    moneyFormat,
    getFlowNodeList() {
      this.stageLoading = true
      getFlowNodeList(this.$route.query.dealType).then(res => {
        this.stageForm.firstNodeList = res.data.filter(item => item.nodeType === 'first')
        this.stageForm.increaseNodeList = res.data.filter(item => item.nodeType === 'new')
        this.stageLoading = false
      })
    },
    cancel() {
      if (this.$parent.$parent.analysisOpen) {
        this.$parent.$parent.analysisOpen = false
      }
    },
    // 执行中规模图表
    getExecuteStageChart() {
      this.infoLoading = true
      getExecuteStageChart(this.queryParams).then(res => {
        var rows = res.data.executeDeal || []
        var arr = []
        this.executeStageChartData.xLabel = rows.map(item => item.nodeName)
        this.executeStageChartData.barWidth = 20
        this.executeStageChartData.legend = false
        rows.forEach(v => {
          arr.push(v.amount)
        })

        this.executeStageChartData.datas = []

        this.executeStageChartData.datas.push({
          type: 'bar',
          data: arr
        })

        this.infoLoading = false
      })
    },
    // 打开设置
    openExecuteStageSetting() {
      this.dealOpen = true
      this.getFlowNodeList()
    },
    // 保存调整
    submitForm() {
      this.$refs.stageForm.validate(valid => {
        if (valid) {
          this.stageLoading = true
          if (!this.stageForm.increaseNodeList) {
            this.stageForm.increaseNodeList = []
          }
          if (!this.stageForm.firstNodeList) {
            this.stageForm.firstNodeList = []
          }
          var nodeList = this.stageForm.firstNodeList.concat(this.stageForm.increaseNodeList)
          saveFlowNodeList(nodeList).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('调整成功'))
              this.dealOpen = false
              this.getExecuteStageChart()
              this.stageLoading = false
            }
          })
        }
      })
    },
    changeTag(type, nodeType) {
      switch (type) {
        case 'industry':
          this.queryParams.industryNodeType = nodeType
          this.getChart(type, this.queryParams.industryNodeType)
          break
        case 'area':
          this.queryParams.areaNodeType = nodeType
          this.getChart(type, this.queryParams.areaNodeType)
          break
        case 'dealInvestmentType':
          this.queryParams.dealTypeNodeType = nodeType
          this.getChart(type, this.queryParams.dealTypeNodeType)
          break
      }
    },
    getTrackList() {
      this.trackLoading = true
      this.trackQuery.fundId = this.queryParams.fundId
      this.trackQuery.deptId = this.queryParams.deptId
      this.trackQuery.userId = this.queryParams.userId
      this.trackQuery.dealType = this.queryParams.dealType
      trackInfo(this.trackQuery).then(response => {
        this.trackList = response.rows
        this.trackTotal = response.total
        this.trackLoading = false
      })
    },
    getChart(type, nodeType) {
      var searchType = ''
      if (type === 'industry') {
        this.industryLoading = true
        searchType = this.queryParams.industrySearchType
      } else if (type === 'area') {
        this.areaLoading = true
        searchType = this.queryParams.areaSearchType
      } else if (type === 'dealInvestmentType') {
        this.dealTypeLoading = true
        searchType = this.queryParams.sourceSearchType
      }

      var param = {
        fundId: this.queryParams.fundId,
        deptId: this.queryParams.deptId,
        userId: this.queryParams.userId,
        dealIndustry: this.queryParams.dealIndustry,
        nodeType: nodeType,
        type: type,
        searchType: searchType,
        pieChartDealType: this.$route.query.dealType
      }
      getChart(param).then(res => {
        if (type === 'industry') {
          this.industryShowChart = false
          this.industryChartData = {
            center: ['50%', '40%'],
            valueFormatter: nodeType === 'amount',
            datas: res.data
          }
          this.industryChartData.datas = this.industryChartData.datas.map(ele => { return { value: ele.nodeValue, name: this.$t(ele.nodeName), dictValue: ele.dictValue, type: type } })
          this.industryShowChart = true
          this.industryLoading = false
        } else if (type === 'area') {
          this.areaShowChart = false
          this.areaChartData = {
            center: ['50%', '40%'],
            valueFormatter: nodeType === 'amount',
            datas: res.data
          }
          this.areaChartData.datas = this.areaChartData.datas.map(ele => { return { value: ele.nodeValue, name: this.$t(ele.nodeName), dictValue: ele.dictValue, type: type } })
          this.areaShowChart = true
          this.areaLoading = false
        } else if (type === 'dealInvestmentType') {
          this.dealTypeShowChart = false
          this.investTypeChartData = {
            center: ['50%', '40%'],
            valueFormatter: nodeType === 'amount',
            datas: res.data
          }
          this.investTypeChartData.datas = this.investTypeChartData.datas.map(ele => { return { value: ele.nodeValue, name: this.$t(ele.nodeName), dictValue: ele.dictValue, type: type } })
          this.dealTypeShowChart = true
          this.dealTypeLoading = false
        }
      })
    },

    tooltipClick(val) {
      this.trackQuery = {
        pageNum: 1,
        pageSize: 20,
        searchType: '',
        dealIndustry: this.queryParams.dealIndustry
      }
      this.formOpen = true
      if (val.type === 'industry') {
        this.trackQuery.industry = val.dictValue
        this.trackQuery.searchType = this.queryParams.industrySearchType
      } else if (val.type === 'area') {
        this.trackQuery.area = val.dictValue
        this.trackQuery.searchType = this.queryParams.areaSearchType
      } else if (val.type === 'dealInvestmentType') {
        this.trackQuery.investType = val.dictValue
        this.trackQuery.searchType = this.queryParams.sourceSearchType
      }
      this.getTrackList()
    },
    getDeal(type) {
      this.formOpen = true
      this.trackQuery.type = type
      this.trackQuery.nodeName = undefined
      this.trackQuery.pageNum = 1
      this.trackQuery.area = undefined
      this.trackQuery.industry = undefined
      this.trackQuery.trackType = undefined
      this.trackQuery.stageNodeName = undefined
      this.getTrackList()
    },
    getNodeDeal(nodeName) {
      this.formOpen = true
      this.trackQuery.type = undefined
      this.trackQuery.nodeName = nodeName
      this.trackQuery.pageNum = 1
      this.trackQuery.area = undefined
      this.trackQuery.industry = undefined
      this.trackQuery.trackType = undefined
      this.trackQuery.stageNodeName = undefined
      this.getTrackList()
    },
    onChange(type) {
      switch (type) {
        case 'industry':
          this.getChart(type, this.queryParams.industryNodeType)
          break
        case 'area':
          this.getChart(type, this.queryParams.areaNodeType)
          break
        case 'dealInvestmentType':
          this.getChart(type, this.queryParams.dealTypeNodeType)
          break
      }
    },
    getList() {
      this.loading = true
      trackInfo(this.queryParams).then(response => {
        this.trackInfoList = response.rows
        this.total = response.total
        this.loading = false
      })
      // 人员统计
      getBarChart(this.queryParams).then(res => {
        var rows = res.data.data || []
        if (rows.length > 0) {
          this.personChartData.xLabel = res.data.userList
          this.personChartData.barWidth = 15
          this.personChartData.legend = true
          this.personChartData.datas = rows
          this.personChartData.datas.forEach(v => {
            v.name = v.nodeName
            v.type = 'bar'
            v.stack = '1'
          })
        } else {
          this.personChartData = {
            datas: []
          }
        }
      })
      // 阶段分布及转化率
      this.changeStage()
    },
    funnelChartClick(params) {
      this.trackQuery = {
        pageNum: 1,
        pageSize: 20,
        type: undefined,
        nodeName: undefined,
        area: undefined,
        industry: undefined,
        searchType: undefined
      }
      this.trackQuery.stageNodeName = params.name
      this.trackQuery.searchType = this.queryParams.stageType
      this.trackQuery.dealIndustry = this.queryParams.dealIndustry

      this.formOpen = true
      this.getTrackList()
    },
    changeStage() {
      this.queryParams.searchType = this.queryParams.stageType
      getStageChart(this.queryParams).then(res => {
        if (res.data.length > 0) {
          var length = res.data.length
          var sum = 20 * (length + 1)
          res.data.forEach(item => {
            item.name = item.nodeName
            item.value = sum -= 20
          })
          this.stageChartData = {
            datas: res.data
          }
        } else {
          this.stageChartData = {
            datas: []
          }
        }
      })
    },
    pageChangeHandle() {
      this.getList()
      this.$refs.table.bodyWrapper.scrollTop = 0
    },
    itemTypeFormat(row) {
      return this.selectDictLabel(this.itemTypeOptions, row)
    },
    trackModeFormat(row) {
      return this.selectDictLabel(this.trackModeOptions, row)
    },
    formatText(htmlStr) {
      if (!htmlStr) return ''
      return htmlStr.replace(/<\/?.+?>/g, '').replace(/ /g, '').replace(/&nbsp;/ig, '')
    },
    changeDealType() {
      this.getDealBeforeDashboardInfo()
    },
    changeDeal() {
      // this.queryHandle()
    },

    queryHandle() {
      this.getExecuteStageChart()
      this.getChart('industry', this.queryParams.industryNodeType)
      this.getChart('area', this.queryParams.areaNodeType)
      this.getChart('dealInvestmentType', this.queryParams.dealTypeNodeType)
      this.$refs.funnelChart.initChart()
      this.$refs.barChart.initChart()
      this.$refs.executeStageChart.initChart()
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        fundId: undefined,
        deptId: undefined,
        userId: undefined,
        dealStatus: undefined,
        trackTime: undefined,
        levelConcern: undefined,
        industryNodeType: 'number',
        areaNodeType: 'number',
        dealTypeNodeType: 'number',
        pageNum: 1,
        pageSize: 20,
        dealType: this.$route.query.dealType,
        infoDealType: this.$route.query.dealType,
        personDealType: this.$route.query.dealType,
        industrySearchType: 'year',
        areaSearchType: 'year',
        sourceSearchType: 'year',
        stageType: 'year',
        type: undefined,
        nodeName: undefined,
        area: undefined,
        industry: undefined
      }
      this.resetForm('queryForm')
      this.queryHandle()
    }
  }
}
</script>
<style lang="scss" scoped>
.deal-before-box{
  display: flex;
  column-gap: 15px;
  .content-box{
    flex: 1;
    background: #E8F3FF;
    border-radius: 8px;
    padding: 12px 20px 10px;
    .title{
      font-size: 13px;
      font-weight: 400;
      display: flex;
      align-items: center;
      i{
        font-size: 12px;
        color: rgba(0,0,0,.45);
        margin-left: 5px;
        cursor: pointer;
      }
    }
    .flex{
      display: flex;
      align-items: center;
      column-gap: 15px;
      margin-top: 5px;
      .column{
        flex: 1;
        &:last-child{
          flex: unset!important;
        }
      }
      .head{
        font-size: 12px;
        font-weight: 400;
        color: rgba(0,0,0,.65);
      }
      .money {
        color: #001AA3;
        font-size: 20px;
        font-weight: 500;
        margin: 7px 0 5px;
        font-weight: 700;
      }
    }
  }
}
.deal-before-evolve{
  color: #fff;
  .title{
    i{
      color: rgba(255,255,255,.6)!important;
    }
  }
  .flex{
    .head{
      color: rgba(255,255,255,.75)!important;
    }
  }
  .bottom{
    font-size: 12px;
    font-weight: 400;
  }
  .up{
    color: #E31616;
  }
  .down{
    color: #008546;
  }
}
.mart10{
  margin-top: 10px;
}
.w100{
  width: 100px;
}
/deep/.w70{
  width: 100px;
  /*右侧图标样式  \e790下箭头图标*/
  .el-input .el-select__caret.el-input__icon::before {
    content: "\e790";
    color: #333;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /*如果不设置图标下拉时是反的*/
  .el-input .el-select__caret {
    transform: rotateZ(0deg);
  }
  .el-input {
    position: relative;
    right: -8px;
  }
  input {
    border: none;
    padding-right: 0;
    position: relative;
    right: -10px;
  }
}
.list-table {
  .area-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .area-header-title {
    font-size: 16px;
    font-family: PingFangSC-Medium,PingFang SC;
    font-weight: 700;
    color: #000;
    line-height: 30px;
    padding: 0;
    &::before{
      content: unset;
    }
  }
}
.text{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 50px;
}
.msgCount{
    position: relative;
    display: inline-block;
    float: right;
    padding: 0 3px 0 0;
    margin-left: 10px;
    .icon{
      background-color: #f56c6c;
      border-radius: 10px;
      color: #fff;
      display: inline-block;
      font-size: 12px;
      height: 18px;
      line-height: 18px;
      padding: 0 6px;
      text-align: center;
      white-space: nowrap;
      position: absolute;
      right: -8px;
      top: -3px;
      zoom: 0.9;
    }
}

/deep/.bg .el-input__inner{
  background-color: #E8F3FF;
}
.tag-btn-left {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  position: relative;
  right: -5px;
}
.tag-btn-right {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0
}

/deep/ .el-select-dropdown__item.li-select.selected {
  color: #409eff !important;
}

/deep/.li-select.selected::after {
  position: absolute;
  right: 20px;
  font-family: element-icons;
  content: "\e6da";
  font-size: 12px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/deep/.stageForm .el-form-item{
  margin-bottom: 5px;
}
</style>
